<script setup>
import { ref, computed, onMounted } from 'vue'
import store from '../store/store.js'
import router from '../router/router.js'
import api from "../utils/api.js";
import {ElMessage} from "element-plus";
import {getUserNickname} from "../utils/commonCall.js";


const initToken = () => {
  api.get('/common/checkToken').then(res => {
    console.log(res)
    localStorage.setItem('token', res.data.token)
    store.commit('setUserId', res.data.userid)
    initNickname()
  })
}

const userId = computed(() => store.state.user.userid)
const userNickName = computed(() => store.state.user.nickname)
const setNicknameShow = ref(false)
const initNickname = () => {
  getUserNickname().then(res => {
    if (!res.data) setNicknameShow.value = true
  })
}
const userNickNameSet = ref('')
const setNickname = () => {
  api.get('/common/setUserNickname', {params: {nickname: userNickNameSet.value}}).then(res => {
    initNickname()
    setNicknameShow.value = false
  })
}

const generateFormData = ref({
  side: 'player1',
  gameMode: 'junior',
  countTime: 30,
  ruleList: [],
  groupId: 1
})
const generateGame = () => {
  api.post('/common/generateGame', generateFormData.value).then(res => {
    console.log(res)
    router.push({ name: 'Battle' })
  })
}

const joinFormData = ref({
  gameId: '',
  side: 'watcher',
})
const joinGame = () => {
  api.post('/common/joinGame', joinFormData.value).then(res => {
    console.log(res)
    router.push({ name: 'Battle' })
  })
}

const backGame = () => {
  router.push({ name: 'Battle' })
}

onMounted(() => {
  initToken()
})

</script>

<template>
  <div style="height: 60vh">
    <div style="padding: 5px 20px;">
    <span>
      临时身份码：{{ userId }}。
    </span>
      <span>
      昵称：{{ userNickName }}
    </span>
    </div>
    <el-popover placement="bottom" :width="320" trigger="click">
      <el-form >
        <el-form-item>
          <el-radio-group v-model="generateFormData.side">
            <el-radio-button label="player1">蓝方</el-radio-button>
            <el-radio-button label="player2">红方</el-radio-button>
          </el-radio-group>
        </el-form-item>
<!--        <el-form-item>-->
<!--          <el-radio-group v-model="generateFormData.gameMode">-->
<!--            <el-radio-button label="junior">常规</el-radio-button>-->
<!--            <el-radio-button label="senior">直播</el-radio-button>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
        <el-form-item label="bp时长">
          <el-input v-model="generateFormData.countTime" placeholder="设置bp时长（单位：秒）" />
        </el-form-item>
        <el-form-item>
          <el-checkbox-group v-model="generateFormData.ruleList" :max="2" style="display: block">
            <el-checkbox value="rule1" label="①双方指定第三轮使用的属性"/>
            <el-checkbox value="rule2" label="②双方各禁用对手一个套装"/>
            <el-checkbox value="rule3" label="③双方抽到的属性不会重复（SP除外）"/>
            <el-checkbox value="rule4" label="④双方各全局禁用一个属性（SP除外）"/>
            <el-checkbox value="rule5" label="⑤双方重抽和暗手次数变为各共计五次"/>
            <el-checkbox value="rule6" label="⑥双方只能使用衍生属性的精灵（SP除外）"/>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button @click="generateGame">创建</el-button>
        </el-form-item>
      </el-form>
      <template #reference>
        <el-button>创建系别</el-button>
      </template>
    </el-popover>
    <el-popover placement="bottom" :width="220" trigger="click">
      <el-form >
        <el-form-item label="房间号">
          <el-input v-model="joinFormData.gameId"/>
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="joinFormData.side">
            <el-radio-button label="watcher">观战</el-radio-button>
            <el-radio-button label="player1">蓝方</el-radio-button>
            <el-radio-button label="player2">红方</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button @click="joinGame">加入</el-button>
        </el-form-item>
      </el-form>
      <template #reference>
        <el-button>加入对局</el-button>
      </template>
    </el-popover>
    <el-button @click="backGame">返回对局</el-button>
  </div>


  <el-dialog v-model="setNicknameShow" :width="'50%'">
    <el-form>
      <el-form-item>
        <el-input v-model="userNickNameSet" placeholder="设置昵称" />
      </el-form-item>
      <el-form-item>
        <el-button @click="setNickname">确认</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped>

</style>